<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三峡大学计算机与信息学院</title>
    <link rel="stylesheet" href="三峡大学.css">
    <script type="text/javascript">
        var num = 1;
        function auto() {
            num++;
            if (num > 3) num = 1;
            var img = document.getElementById("img");
            img.src = "img/ban" + num + ".png";
        }
        window.onload = function () {
            setInterval(auto, 2000);
        };
    </script>
</head>

<body>
    <!-- 三峡大学头部栏 -->
    <div class="sx_top">
        <div class="sx_top_img"></div>
        <div class="sx_top_search">
            <form>
                <input type="text" placeholder="请输入关键字">
                <input type="submit" class="sx_top_bottom" value="搜索">
            </form>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="sx_nav">
        <span><a href="">首页</a></span>
        <span><a href="">学院概况</a></span>
        <span><a href="">学院动态</a></span>
        <span><a href="">师资队伍</a></span>
        <span><a href="">本科生培养</a></span>
        <span><a href="">研究生培养</a></span>
        <span><a href="">学科建设</a></span>
        <span><a href="">科学研究</a></span>
        <span><a href="">党建工作</a></span>
        <span><a href="">学生工作</a></span>
        <span><a href="">教工之家</a></span>
    </div>
    <!-- 背景图片 -->
    <div class="auto_bg" onload="auto()">
        <img id="img" src="img/ban1.png" width="100%">
    </div>
    <!-- 学院动态 -->
    <div class="sx_dt">
        <span class="dt_1">
            <p>学院动态</p>
        </span>
        <span class="dt_2">
            <p>NEWS</p>
        </span>
        <span class="dt_3"><img src="img/more.png"><a href="#"></a></span>
    </div>
    <!-- 轮播图 -->
    <div class="sx_dt_bg">
        <ul class="item">
            <li class="list active"><img src="img/0FCCC7A9B1BDD17E6D77AF41782_238622B1_BAF6.png" width="100%"
                    height="100%"></li>
            <li class="list"><img src="img/5360310262D2127D43D8F4F3278_BB7315B2_A4C0 (2).png" width="100%"
                    height="100%"></li>
            <li class="list"><img src="img/9AA8BFBD18D1DDD084F4073E790_E513F406_BEBA.png" width="100%" height="100%">
            </li>
            <li class="list"><img src="img/B0B9050A5FAF0F72357D100CF66_D6170E29_C182.jpg" width="100%" height="100%">
            </li>
            <li class="list"><img src="img/FC97308B8571D4CA62B2FC31666_D5202BC7_C241.png" width="100%" height="100%">
            </li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index="0"><a href="#">&nbsp;1</a></li>
            <li class="point" data-index="1"><a href="#">&nbsp;2</a></li>
            <li class="point" data-index="2"><a href="#">&nbsp;3</a></li>
            <li class="point" data-index="3"><a href="#">&nbsp;4</a></li>
            <li class="point" data-index="4"><a href="#">&nbsp;5</a></li>
        </ul>
    </div>
    <script>
        var items = document.querySelectorAll(".list");
        var points = document.querySelectorAll(".point");
        var all = document.querySelector(".sx_dt_bg");
        var index = 0;
        // 消除active
        var clearActive = function () {
            for (var i = 0; i < items.length; i++) {
                items[i].className = "list";
            }
            for (var j = 0; j < points.length; j++) {
                points[j].className = "point";
            }
        }
        //改变效果
        var goIndex = function () {
            clearActive();
            items[index].className = 'list active';
            points[index].className = 'point active'
        }
        //绑定事件监听
        for (i = 0; i < points.length; i++) {
            points[i].addEventListener('click', function () {
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//计时器跳转清零
            })
        }
    </script>
    <div class="sx_bul">
        <ul>
            <li><a href="">&nbsp;沿途有我|我院举行2024届考研复试指...</a></li>
            <li><a href="">&nbsp;沿途有我|我院举行2024届考研复试指...</a></li>
            <li><a href="">&nbsp;沿途有我|我院举行2024届考研复试指...</a></li>
            <li><a href="">&nbsp;沿途有我|我院举行2024届考研复试指...</a></li>
            <li><a href="">&nbsp;沿途有我|我院举行2024届考研复试指...</a></li>
            <li><a href="">&nbsp;沿途有我|我院举行2024届考研复试指...</a></li>
        </ul>
    </div>
    <div class="sx_bul2">
        <div><img src="img/i1.png" width="100%" height="100%"></div>
        <div><img src="img/i2.png" width="100%" height="100%"></div>
        <div><img src="img/i3.png" width="100%" height="100%"></div>
        <div><img src="img/i4.png" width="100%" height="100%"></div>
    </div>
    <!-- 通知公告 -->
    <div class="ann">
        <div><span class="con">
                <p>通知公告</p>
            </span>
            <span class="eng">
                <p>ANNOUNCEMENT</p>
            </span>
            <span class="ann_point"><img src="img/more.png"></span>
        </div>
        <div><span class="con">
                <p>学术动态</p>
            </span>
            <span class="eng">
                <p>ACADMIC</p>
            </span>
            <span class="ann_point"><img src="img/more.png"></span>
        </div>
        <div><span class="con">
                <p>就业信息</p>
            </span>
            <span class="eng">
                <p>EMPLOYMENT</p>
            </span>
            <span class="ann_point"><img src="img/more.png"></span>
        </div>
    </div>
    <!-- 通知内容 -->
    <div class="sx_gg">
        <div><ul>
        <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
    </ul></div>
        <div><ul>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        </ul></div>
        <div><ul>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
            <li><a href="">三峡大学计算机与信息学院诚聘海内外优秀博士</a></li>
        </ul></div>
    </div>
    <!-- 相关链接 -->
    <div class="sx_link">
        <span class="sx_link1"><p>相关链接</p></span>
        <span class="sx_link2"><p>RELATED LINKS</p></span>
        <span class="sx_link_img"><img src="img/more.png"></span>
    </div>
    <div class="sx_list_img">
        <span class="sx_list_img1"><img src="img/l1.png"width="100%" height="100%"></span>
        <span class="sx_list_img2"><img src="img/l2.png" width="100%" height="100%"></span>
        <span class="sx_list_img3"><img src="img/l3.png" width="100%" height="100%"></span>
        <span class="sx_list_img4"><img src="img/l4.png" width="100%" height="100%"></span>
    </div>
    <!-- 结束栏 -->
    <div class="end">
    </div>
</body>

</html>